import React from 'react'
import './AddAD.css'
import { Input, Button, Select,message } from 'antd';
import axios from '../../../utils/http'
import {UPDATEARTICLECLASS} from '../../../utils/api'


const { Option } = Select;

class ModifyArticleClassification extends React.Component {
    constructor() {
        super()
        this.state = {
             data:{}
        };
    }


// 生命周期
componentWillMount() {
    this.setState({
        data:{...this.props.location.query.name}
    })
    // console.log(this.props.location.query.name);
  }
//  系统下拉款
onChangext = (value) => {
    let obj = {...this.state.data}
    obj.systemName=value
    this.setState({
        data:{...obj}
    })
}

 //  分类下拉款
 onChangefl = (value) => {
    let obj = {...this.state.data}
    obj.articleCname=value
    this.setState({
        data:{...obj}
    })
}
// 分类介绍
changeIpt=(e)=>{
    let obj = {...this.state.data}
    obj.articleCc=e.target.value
    this.setState({
        data:{...obj}
    })   
}

// 取消
quxiaoxg=()=>{
    this.props.history.push('/Home/wangZhan/ArticleClassification/ArticleClassificationTable')
}

// 发起请求
quedinxg=async()=>{
    await axios({
        method:'post',
        url:UPDATEARTICLECLASS,
        data:this.state.data
    }).then(data=>{
        console.log(data);
        if (data.data.code===200) {
            message.success('添加成功', 3);
            this.props.history.push('/Home/wangZhan/ArticleClassification/ArticleClassificationTable')
        }else{
            message.error('添加失败',3);
        }
    })
   
    
}



    render(){
        return (
            <div className='AddAD'>
                {/* 我是文章分类管理修改 */}
                <div className='adName'>
                    <span>分类ID：</span>
                    <span><Input disabled defaultValue={this.state.data.articleCid} style={{width:'5rem',background:'#373758',color:'white'}}/></span>
                 </div>        
                 <div>
                    <span>系统名称: </span>
                    <span><Select
                        showSearch
                        style={{ width: 200 }}
                        placeholder="请输入系统名称"
                        optionFilterProp="children"
                        defaultValue={this.state.data.systemName}
                        onChange={this.onChangext}
                        filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                    >
                        <Option value="帮助中心">帮助中心</Option>
                        <Option value="文章咨询">文章咨询</Option>
                        <Option value="文章推送">文章推送</Option>
                    </Select>,</span>
                </div>
               <div>
                    <span>分类名称: </span>
                    <span><Select
                        showSearch
                        style={{ width: 200 }}
                        placeholder="请输入分类名称"
                        optionFilterProp="children"
                        onChange={this.onChangefl}
                        defaultValue={this.state.data.articleCname}
                        filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                    >
                       <Option value="帮助中心">帮助中心</Option>
                        <Option value="文章咨询">文章咨询</Option>
                        <Option value="文章推送">文章推送</Option>
                    </Select>,</span>
                </div>
              
                <div>
                    <span>分类介绍：</span>
                    <span><Input defaultValue={this.state.data.articleCc}  onChange={this.changeIpt}/></span>
                </div>
                <div>
                <Button type="primary" style={{margin:'2rem 6rem'}} onClick={this.quxiaoxg} >取消</Button>
                    <Button type="primary" onClick={this.quedinxg}>确定</Button>
                </div>


            </div>
        )
    }

}

export default ModifyArticleClassification